<!DOCTYPE HTML>
<html>

<head>
    <title></title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>

<body>
    <div>
        <img src="Images/p001.jpg" alt="" id="img1" class="slideg1">
        <img src="Images/p002.jpg" alt="" id="img2" class="slideg2">
        <img src="Images/p003.jpg" alt="" id="img3" class="slideg3">
        <img src="Images/p004.jpg" alt="" id="img4" class="slideg4">
        <div class="silder">
            <a href="#img1">img1</a>
            <a href="#img2">img2</a>
            <a href="#img3">img3</a>
            <a href="#img4">img4</a>
        </div>
    </div>
    </div>
    <style>
        img {
            width: 400px;
            height: 400px;
            position: fixed;
            left: 0;
            z-index: 1;
            visibility: hidden;
        }

        .bar {
            position: relative;
            z-index: 100;
        }

        a {
            display: inline-block;
            border: 1px solid black;
            width: 100px;
            background: #ccc;
        }

        /*定义动画  @keyframes关键帧*/
        /* 通过关键词 "from" 和 "to"，
        等价于 0% 和 100%。0% 是动画的开始时间，100% 动画的结束时间 */
        @keyframes slideg1 {
            from {
                left: -200px;
            }

            to {
                left: 0px;
            }
        }

        @keyframes slideg2 {
            from {
                top: 350px;
            }

            to {
                top: 0px;
            }
        }

        @keyframes slideg3 {
            from {
                transform: scale(0);
            }

            to {
                transform: scale(1);
            }
        }

        @keyframes slideg4 {
            from {
                transform: slideg4(0deg) scale(0);
            }

            to {
                transform: slideg4(360deg) scale(1);
            }
        }

        /* 兼容ie9写法 
        webkit表示这个动画效果只适用于webkit内核的浏览器*/
        @-webkit-keyframes slideg1 {
            from {
                left: -300px;
            }

            to {
                left: 0px;
            }
        }

        @-webkit-keyframes slideg2 {
            from {
                top: 350px;
            }

            to {
                top: 0px;
            }
        }

        @-webkit-keyframes slide3 {
            from {
                transform: scale(0);
            }

            to {
                transform: scale(1);
            }
        }

        @-webkit-keyframes slideg4 {
            from {
                transform: slideg4(0deg) scale(0);
            }

            to {
                transform: slideg4(360deg) scale(1);
            }
        }

        div>img:target {
            z-index: 20;
            visibility: visible;
        }

        /*使用 target 伪类触发动画
        :target选择器用于选取当前活动的目标元素
        合理利用target伪类可以减少js的使用，不仅可以实现页面的优化，也可以让代码结构更加清晰*/
        .slideg1:target {
            animation: slideg1 5s;
            -webkit-animation: slideg1 5s;
        }

        .slideg2:target {
            animation: slideg2 5s;
            -webkit-animation: slideg2 5s;
        }

        .slide3:target {
            animation: slide3 5s;
            -webkit-animation: slide3 5s;
        }

        .slideg4:target {
            animation: slideg4 5s;
            -webkit-animation: slideg4 5s;
        }
    </style>
</body>

</html>